import React from 'react';
import { inject, observer } from 'mobx-react';
import { Carousel } from 'antd';

@inject('portalDeskTopStore')
@observer
class E9DeskTopBgImg extends React.Component {
    constructor(props) {
        super(props);
        this.beforeChange = this.beforeChange.bind(this);
        this.state = { imgStyle: { width: jQuery(window).width(), height: jQuery(window).height() } };
    }

    componentDidMount() {
        jQuery(window).resize(() => {
            this.setState({ imgStyle: { width: jQuery(window).width(), height: jQuery(window).height() } });
        });
    }

    render() {
        const { portalDeskTopStore } = this.props;
        const { state, bgImageObj } = portalDeskTopStore;
        const { bgImages, autoCarousel, carouselTime } = state;
        const { initialSlide, imgsrc } = bgImageObj;

        let displayComp = <div className="e9desktop-bg-image" style={imgsrc ? { backgroundImage: `url(${imgsrc})` } : {}} />;
        if (autoCarousel) {
            displayComp = (
                <Carousel ecId={`${this && this.props && this.props.ecId || ''}_Carousel@s8zl4a`}
                  autoplay={true}
                  initialSlide={initialSlide}
                  dots={false}
                  fade={true}
                  speed={800}
                  autoplaySpeed={carouselTime * 1000}
                  beforeChange={this.beforeChange}
                >
                    {bgImages.map((item, index) => <img key={index} src={item.imgsrc} alt="" style={this.state.imgStyle} />)}
                </Carousel>
            );
        }

        return (
            <div className="e9desktop-bg-container">
                {displayComp}
                <div className="e9desktop-bg-header" />
            </div>
        );
    }

    beforeChange(from, to) {
        const { portalDeskTopStore } = this.props;
        const { state } = portalDeskTopStore;
        const { bgImages } = state;
        portalDeskTopStore.setState2({ imgid: bgImages[to].id });
    }
}

export default E9DeskTopBgImg;
